<template>
  <div class="table-all" style="display: flex;flex-direction: row; background: #F3F5F8">
    <div style="min-width: 260px; max-height: 900px; border-right: 1px solid #f1f1f1; margin-left: 5px;margin-bottom: 10px; overflow: auto; background: #fff;">
      <div style="width: 100%; height: 50px; line-height: 30px; text-align: center; padding: 10px;  font-size: 16px; border-bottom: 1px solid #EFEFEF;">事故原因分类</div>
      <div>
        <el-tree
          style="margin-top: 10px"
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          @node-click="nodeClick"
          ref="tree">
        </el-tree>
      </div>
    </div>
    <div class="table-all" style="width: calc(100% - 260px);">
        <!-- 搜索区 -->
        <div class="app-container search-box">
            <SearchForm
                    :form="searchData.form"
                    :options="searchData.options"
                    @searchUpdate="search"
                    @resetSearchData="resetSearchData"
            ></SearchForm>
        </div>
        <!-- 按钮区 -->
        <div class="app-container table-box">
            <div class="table-main">
                <!-- 表格 -->
                <v-table
                        v-if="tableMainHeight>0"
                        :table-columns="tableColumns"
                        :table-data="tableData"
                        :loading="loading"
                        ref="table"
                        :maxHeight="tableMainHeight">
                    <template #topButtonList>
                        <ButtonForm :buttonList="buttonList" @clickButton="clickButton"></ButtonForm>
                    </template>
                                <template #type="scope">
                                        {{getFormatTypeName(scope.row.type)}}
                                </template>
                    <template #operation="scope">
                        <a v-hasPermission="['riskAccidentCasesReason:add']" class="table-btn-edit table-operation"
                           @click="handleEdit(scope.row)">{{$t('table.edit')}}</a>
                        <a v-hasPermission="['riskAccidentCasesReason:delete']" class="table-btn-delete table-operation"
                           @click="singleDelete(scope.row)">{{$t('table.delete')}}</a>
                    </template>
                </v-table>
            </div>
            <div class="table-page">
                <!-- 页码 -->
                <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                            @pagination="search"/>
            </div>
        </div>
        <!-- 详情 -->
        <detailDialog :dialog-visible="detailDialogShow"
                    @success="editSuccess"
                    @close="editClose"
                    :openType="detailOpenType"
                    :treeData = treeData
                    :curType = curType
                    :id="detailId"
                    :title="detailTitle"
        ></detailDialog>
    </div>
  </div>
</template>

<script>
    import { riskAccidentCasesReasonPage,
            riskAccidentCasesReasonDelete } from '@/api/risk/riskAccidentReason'
    import SearchForm from '@/components/searchForm/index'
    import ButtonForm from '@/components/ButtonForm/index'
    import VTable from '@/components/VTable/index'
    import Pagination from '@/components/Pagination/index'
    import detailDialog from './detail.vue'
    import vue from "@/main.js";
    export default {
        components:{
            VTable,Pagination,detailDialog,SearchForm,ButtonForm
        },
        data(){
            return{
                treeData:[],
                defaultProps: {
                  children: 'children',
                  label: 'label'
                },
                tableColumns:[
                            {
                                prop: 'reason',
                                label: '事故原因',
                                minWidth: '150',
                                slotname: 'reason',
                                options: {}
                            },
                            {
                                prop: 'type',
                                label: '所属业务专题',
                                minWidth: '150',
                                slotname: 'type',
                                options: {}
                            },
                            {
                                prop: 'remark',
                                label: '备注',
                                minWidth: '150',
                                slotname: 'remark',
                                options: {}
                            },
                            {
                                prop: 'createBy',
                                label: '创建人',
                                minWidth: '150',
                                slotname: 'createBy',
                                options: {}
                            },
                            {
                                prop: 'createTime',
                                label: '创建时间',
                                minWidth: '150',
                                slotname: 'createTime',
                                options: {}
                            },
                    {
                        prop: 'operation',
                        label: '操作',
                        width: '200',
                        align: 'center',
                        slotname: 'operation',
                        overflow: false,
                        fixed: 'right'
                    }
                ],
                tableData:[],
                selection: [],
                loading:false,
                total:1,
                pageNum:1,
                pageSize:10,
                detailOpenType:"add",
                detailDialogShow:false,
                detailId:"",
                detailTitle:"新增",
                dict:{},
                curType:"",
                searchData:{
                  form:{
                        reason:'',
                        remark:'',
                },
                   options:[
                             {
                                 title:'事故原因',
                                 key: "reason",
                                 type: "text",
                             },
                             {
                               title:'备注',
                               key: "remark",
                               type: "text",
                             },
                        ]
                },
                tempButtonList:[
                   {name:'新增',methods:'handleAdd',type:'primary', hasPremission:["riskAccidentCasesReason:add"]}
                ],
                buttonList:[],
                tableMainHeight: 0,
            }
        },
        watch: {

        },
        methods:{
            getFormatTypeName(typeValue){
              if(typeValue){
                let type = typeValue.split(",")
                let item  = this.treeData.find(t=>t.value == type[0])
                if(type.length ==2){
                  let type1 = item.children.find(t=> t.value == type[1])
                  if(type1!=undefined){
                    return type1.label
                  }
                }
                if(type.length==3){
                  let type1 = item.children.find(t=> t.value == type[1])
                  if(type1!=undefined){
                    let t =  type1.children.find(x=> x.value == type[2])
                    if(t!=undefined){
                      return t.label
                    }
                  }
                }
              }
            },
            nodeClick(data,node,self){
              console.log("nodeClick==============>",data, node ,self)
              this.isLast = false
              if(!data.children){
                 this.buttonList = this.tempButtonList
                 this.isLast = true
              }else {
                 this.buttonList = []
              }
              // 1,22,33
              this.curType = this.formatType(data.value)
              this.search()
            },
            formatType(value){
               let temp = []
               this.treeData.forEach(t=>{
                 if(t.value==value){
                    temp.push(t.value)
                     return
                 }
                 if(t.children){
                    t.children.forEach(x=>{
                      if(x.value==value){
                        temp.push(t.value)
                        temp.push(x.value)
                        return
                      }
                      if(x.children){
                        x.children.forEach(z=>{
                          if(z.value == value){
                            temp.push(t.value)
                            temp.push(x.value)
                            temp.push(z.value)
                            return
                          }
                        })
                      }
                      if(temp.length>0){
                        return
                      }
                    })
                   if(temp.length>0){
                     return
                   }
                 }
               })
              return temp.join(",")
            },
            getCheckBoxValue(value,option){
                if(!value){
                    return
                }
                let temp = []
                let data = value.split(",")
                data.forEach(t=>{
                    let item = option.find(x=> x.value == t)
                if(item != undefined){
                    temp.push(item.label)
                }
            })
                return temp.join(",")
            },
            getDictValue(value,option){
                let item = option.find(t=> t.value == value)
                if(item!=undefined){
                    return item.label
                }
                return value
            },
            editClose(){
                this.detailDialogShow = false
            },
            editSuccess(){
                this.search()
                this.detailDialogShow = false
            },
            search(){
                this.fetch({
                        ...this.searchData.form,
                       type:this.curType
                })
            },
            fetch(params={}){
                params.pageSize = this.pageSize
                params.pageNum = this.pageNum
                this.loading = true
                 riskAccidentCasesReasonPage(params).then(res=>{
                    if(res.code==200){
                        this.total = res.data.total
                        this.tableData = res.data.rows
                    }else{
                    this.$message({
                        message: this.$t('tips.systemException'),
                        type: 'error'
                     })
                   }
                }).finally(final=>{
                    this.loading = false
               })
            },
            // 重置搜索条件
            resetSearchData(){
                this.searchData.form = {
                        reason:'',
                        type:'',
                }
            },
            // 触发按钮区域按钮方法
            clickButton(methods){
                this[methods]()
            },
            handleAdd(){
                if(!this.isLast){
                  this.$message.warning("请选择具体的细类")
                  return
                }
                this.detailOpenType = "add"
                this.detailTitle = "新增"
                this.detailDialogShow = true
            },
            handleEdit(row){
                this.detailId = row.id
                this.detailOpenType = "edit"
                this.detailTitle="编辑"
                this.detailDialogShow = true
            },
            closeDialog(){
                this.detailDialogShow = false
            },
            singleDelete(row){
                this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
                    confirmButtonText: this.$t('common.confirm'),
                    cancelButtonText: this.$t('common.cancel'),
                    type: 'warning'
                }).then(() => {
                    this.loading = true
                    riskAccidentCasesReasonDelete(row.id).then(res=>{
                    if(res.code==200){
                    this.$message({
                        message: this.$t('tips.deleteSuccess'),
                        type: 'success'
                    })
                    this.search()
                     }else{
                        this.$message({
                            message: this.$t('tips.systemException'),
                            type: 'error'
                        })
                    }
                 }).finally(final=>{
                    this.loading = false
                 })
                })
            }
        },
        activated(){
            this.fetch()
        },
        created(){
            // 获取字典值
          this.treeData = []
          let allDataDict = vue.$store.state.account.allDataDict;
          let dataObj = allDataDict.find(item => item.dictType == "riskAccidentCasesType");
          console.log("dataObj====>",dataObj)
          let list = dataObj.dictDataList;
          for (let s of list) {
            let dictValue = JSON.parse(s.dictValue);
            let innerObj = {
              id: dictValue.value,
              label: s.dictLabel,
              children: dictValue.children,
              value:dictValue.value,
            };
            this.treeData.push(innerObj);
          }

        },
        mounted(){
            this.tableMainHeight = document.getElementsByClassName('table-main')[0].clientHeight - 44 //减去顶部按钮列表的高度
        }
    }
</script>

<style lang="scss" scoped>
    .table-all {
        display: flex;
        flex-direction: column;
        height: 100%;

    .search-box {
        padding-bottom: 6px;
    }

    .table-box {
        padding-top: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;

    .table-main {
        flex: 1;
        overflow: auto;
    }

    .table-page {
        // padding-top: 10 px;
        // padding-bottom: 10 px;
    }

    ::v-deep .pagination-container {
        text-align: right;
    }

    }
    }
</style>
